<template>
  <el-container>
    <el-main>
      <div class="default-main ba-table-box">
        <TableHeader
          :buttons="['refresh', 'add', 'remove', 'comSearch', 'columnDisplay']"
          :quick-search-placeholder="placeholder"
          @action="baTable.onTableHeaderAction"
        />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" @action="baTable.onTableAction" />
        <!-- 表单 -->
        <PopupForm />
      </div>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted, markRaw, inject } from "vue";
import { useRoute } from "vue-router";
import baTableClass from "@/utils/baTable";
import { baTableApi, operatorShowOff } from "@/utils/common"; // 导入表格api方法生成器
import { LineCruiseGroup } from "@/api/backend/index";
import useCurrentInstance from "@/utils/useCurrentInstance";
import TableHeader from "@/components/table/header/index.vue";
import { useAdminInfo } from "@/store/adminInfo";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import PopupForm from "../popupForm.vue";
import { useStandard } from "@/store/backend/LineCruiseM/standard";
import { useStandardItems } from "@/store/backend/LineCruiseM/items";

const { proxy } = useCurrentInstance(); //全局事件总线
const tableRef = ref();
const placeholder = ref<string>("模糊搜索");
const adminInfo = useAdminInfo();
const route = useRoute();
const standard = useStandard();
const items = useStandardItems();
const navTabs = inject("navTabs") as any;

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + LineCruiseGroup)
      ? (navTabs as any).pageSizeMap.get(route.path + LineCruiseGroup)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(
  new baTableApi(LineCruiseGroup),
  {
    pk: "id",
    column: [
      { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("standardName"),
        label: "标准名称",
        prop: "standardName",
        align: "center",
      },
      // {
      //   label: "设备类型",
      //   prop: "etype",
      //   align: "center",
      //   operatorPlaceholder: "模糊搜索",
      // },
      {
        show: filedShowOff("aim"),
        label: "巡检目的",
        prop: "aim",
        align: "center",
        operatorPlaceholder: "模糊搜索",
      },
      {
        show: filedShowOff("count"),
        label: "检查项总数",
        prop: "count",
        align: "center",
        operatorPlaceholder: "模糊搜索",
      },

      {
        // show: operatorShowOff([route.path + "/remove", route.path + "/edit"]),
        label: "操作",
        align: "center",
        width: "130",
        render: "buttons",
        fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "editSet",
            title: "编辑",
            text: "",
            type: "primary",
            icon: "iconfont icon-pencil",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
          {
            render: "confirmButton",
            name: "remove",
            title: "删除",
            text: "",
            type: "danger",
            icon: "el-icon-DeleteFilled",
            class: "table-row-delete",
            popconfirm: {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              confirmButtonType: "danger",
              title: "确认删除？",
            },
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return true;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
        operator: false,
      },
    ],
    filter: { pageSize: pageSizeKeep() },
    acceptQuery: false,
  },
  {
    defaultItems: {}, //默认值
  },
  {}
);

// //跳转售后人员详情页
// const infoButtonClick = (name: string, row: any) => {
//   console.log("row", row);
//   staff.$patch((state) => {
//     state.single = row;
//   });
//   router.push({
//     path: "/admin/ServicesM/staffDetail",
//     query: { employeeId: row.id },
//   });
// };
const emit = defineEmits(["on-showStandardList"]);
//编辑标准
const getStandardData = (name: string, row: any) => {
  emit("on-showStandardList", row); //打开下级标准项列表
  console.log("编辑标准", row);
  standard.$state.groupId = row.id;
  items.$state.groupId = row.id;
  baTable.requestEdit(row.id); //获取相应id的标准数据
  baTable.form.operate = "edit"; //打开标准数据表单
};
//删除标准
const removeData = (row: any) => {
  standard.deleteStandard(row).then((res) => {
    baTable.getList("");
  });
};

onMounted(() => {
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(LineCruiseGroup);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      if (!baTable.activate) return;
      if (data.name === "editSet") {
        //除了获取数据外 打开标准项数据
        getStandardData(data.name, data.row);
      } else if (data.name === "removeSet") {
        removeData(data.row);
      }
    }
  );
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
provide("adminInfo", adminInfo);
</script>
<style lang="scss" scoped></style>
